<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/view/jsp/public/include.base.jsp" %>

<div class="panel">
    <div class="panel-body">
        <form class="form-horizontal" id="addUserForm">
            <div class="form-group">
                <label for="employeeNo" class="col-sm-3 control-label">用户名：</label>

                <div class="col-sm-3">
                    <input type="text" class="form-control" id="employeeNo" name="account" placeholder="请输入用户名">
                </div>
            </div>

            <div class="form-group">
                <label for="name" class="col-sm-3 control-label">姓名：</label>

                <div class="col-sm-3">
                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
                </div>
            </div>

            <div class="form-group">
                <label for="roleIds" class="col-sm-3 control-label">权限类别：</label>

                <div class="col-sm-3">
                    <select class="form-control" id="roleIds" name="roleIds" style="width: 100%">
                        <option value="">请选择分类</option>
                        <c:if test="${not empty roles}">
                            <c:forEach items="${roles}" var="role">
                                <option value="${role.id}">${role.name}</option>
                            </c:forEach>
                        </c:if>
                    </select>
                </div>
            </div>

            <%--<div class="form-group">
                <label for="shopId" class="col-sm-3 control-label">所属门店：</label>

                <div class="col-sm-3">
                    <select class="form-control" id="shopId" name="shopId" style="width: 100%">
                        <option value=""></option>
                        <c:if test="${not empty shops}">
                            <c:forEach items="${shops}" var="shop">
                                <option value="${shop.id}">${shop.cityName} - ${shop.name}</option>
                            </c:forEach>
                        </c:if>
                    </select>
                </div>
            </div>--%>

            <div class="form-group">
                <label for="phone" class="col-sm-3 control-label">手机号码：</label>

                <div class="col-sm-3">
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号码">
                </div>
            </div>

            <div class="form-group">
                <label for="password" class="col-sm-3 control-label">当前密码：</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" autocomplete="off" id="password" name="password" onfocus="this.type='password'" placeholder="请输入密码">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">当前状态：</label>
                <div class="col-sm-3">
                    <div class="radio" style="margin-top: 0;">
                        <label>
                            <input type="radio" name="status" id="status1" value="1" checked="" class="px">
                            <span class="lbl">正常</span>
                        </label>
                    </div> <!-- / .radio -->
                    <div class="radio" style="margin-bottom: 0;">
                        <label>
                            <input type="radio" name="status" id="status2" value="2" class="px">
                            <span class="lbl">取消</span>
                        </label>
                    </div> <!-- / .radio -->
                    <%--<input type="radio" class="form-control" name="status" value="1">正常
                    <input type="radio" class="form-control" name="status" value="2">取消--%>
                </div>
            </div>
        </form>
    </div>
    <div class="panel-footer" style="text-align: center;">
        <button type="button" style="margin:5px;" class="btn btn-primary btn-lg" onclick="save()"><span>保存</span>
        </button>
        <button type="button" style="margin:5px;" class="btn btn-default btn-lg" onclick="cancel()"><span>取消</span>
        </button>
    </div>
</div>


<script type="text/javascript">
    var save = function(){
        if($("#addUserForm").valid()){
            $.ajax({
                url: '${pageContext.request.contextPath}/system/user/create',
                type: 'POST',
                data: $('#addUserForm').serialize(),
                success: function (data) {
                    if (data.meta.success) {
                        bootbox.alert({
                            title: '<span style="font-size: 14px;"><B>提示</B></span>',
                            message: "<div style='text-align: left;'><span style='font-size: 14px;'>操作成功</span></div>",
                            callback: function () {
                                document.location.reload();
                            },
                            className: "bootbox-sm"
                        });

                    }
                },
                error: function () {
                }

            });
        }
    };

    var cancel = function () {
        parent.load("/system/user");
    };

    $(document).ready(function () {
        $("#addUserForm").validate({
            ignore: '.ignore',
            focusInvalid: false,
            rules: {
                'employeeNo': {
                    required: true,
                    remote: {
                        url: '${pageContext.request.contextPath}/system/user/validate',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            employeeNo:function(){
                                return $('#employeeNo').val();
                            }
                        },
                        dataFilter: function (data) {
                            var result = jQuery.parseJSON(data);
                            if (result.meta.success)
                                return result.data;
                            return false;
                        }
                    }
                },
                'name':{
                    required: true
                },
                'password':{
                    required: true
                }
            },
            messages: {
                'employeeNo': {
                    required:'员工编号不能为空.',
                    remote: '该员工编号已存在.'
                },
                'name' : {
                    required:'姓名不能为空.'
                },
                'password' : {
                    required:'密码不能为空.'
                }
            }
        });
    });
</script>
